<template>
  <div class="pageContent">
    <div class="top">
      <a-button type="primary" @click="showModal">新建角色</a-button>
    </div>

    <!-- 表格 -->
    <div class="atable">
      <a-table :columns="columns" :data-source="data">
        <span slot="action" slot-scope="text, record">
          <a style="color:#1890FF;margin-right:10px" @click="onEdit(text, record)">编辑</a>

          <a-popconfirm
            title="是否确认删除"
            ok-text="确认"
            cancel-text="取消"
            @confirm="confirm(text)"
            @cancel="cancel"
          >
            <a style="color:#1890FF">删除</a>
          </a-popconfirm>
          <!-- <a style="color:#1890FF" @click="onDelete(text, record)">删除</a> -->
        </span>
      </a-table>
    </div>

    <!-- 分页 -->
    <div class="pagination flexBetween">
      <div>共{{total}} 条记录 第 {{current}} / {{Math.ceil((total/pageSize))}} 页</div>
      <div>
        <a-pagination
          :current="current"
          :page-size-options="pageSizeOptions"
          :total="total"
          show-size-changer
          :pinspector-size="pageSize"
          @showSizeChange="onShowSizeChange"
          @change="pageChange"
          show-quick-jumper
        >
          <template slot="buildOptionText" slot-scope="props">
            <span v-if="props.value !== '40'">{{ props.value }}条/页</span>
            <span v-if="props.value === '40'">全部</span>
          </template>
        </a-pagination>
      </div>
    </div>

    <!-- 对话框 -->
    <div class="amodla">
      <a-modal
        v-model="visible"
        :title="modalTitle"
        @ok="handleOk"
        @cancel="cancelModal"
        :maskClosable="false"
        cancelText="取消"
        okText="确认"
      >
        <a-form-model
          ref="ruleForm"
          :model="form"
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
          v-if="visible"
        >
          <a-form-model-item ref="name" label="角色名称" prop="name">
            <a-input v-model="form.name" :maxLength="30" />
          </a-form-model-item>

          <a-form-model-item ref="remarks" label="角色说明" prop="remarks">
            <a-input v-model="form.remarks" :maxLength="30" />
          </a-form-model-item>

          <a-form-model-item ref="scopeAuthority" label="权限范围" prop="scopeAuthority" v-if="modalTitle=='编辑角色'">
            <a-tree
              checkable
              v-if="selectTree.length>0"
              :tree-data="treeData"
              :default-expanded-keys="[treeData[1].key]"
              :default-checked-keys="selectTree"
              @check="onCheck"
            ></a-tree>
          </a-form-model-item>
          <a-form-model-item ref="scopeAuthority" label="权限范围" prop="scopeAuthority" v-if="modalTitle=='新增角色'">
            <a-tree
              checkable
              :tree-data="treeData"
              :default-expanded-keys="[treeData[1].key]"
              :default-checked-keys="selectTree"
              @check="onCheck"
            ></a-tree>
          </a-form-model-item>
        </a-form-model>
      </a-modal>
    </div>
  </div>
</template>

<script>
import { roleQuery, roleUpdate, roleDelete, menuQuery, roleAdd, roleGet } from '@/api/role.js'
export default {
  data() {
    return {
      columns: [
        { title: '角色名称', dataIndex: 'name', key: 'name', align: 'center' },
        { title: '用户数', dataIndex: 'userRoleNum', key: 'userRoleNum', align: 'center' },
        { title: '角色说明', dataIndex: 'remarks', key: 'remarks', align: 'center' },
        {
          title: '操作',
          key: 'action',
          scopedSlots: { customRender: 'action' },
          align: 'center'
        }
      ],
      data: [],
      form: {
        name: '',
        remarks: '',
        scopeAuthority: '',
        menuIdList: []
      },
      treeData: [],
      selectTree: [],
      flag: false,
      visible: false,
      modalTitle: '新建角色',
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      pageSizeOptions: ['5', '10', '20', '30', '40'],
      current: 1,
      pageSize: 10,
      total: 1,
      editId:'',
      projectData: [
        {
          key: 'jh',
          lable: '京沪扩建工程项目'
        },
        {
          key: 'ct',
          lable: '常泰扩建工程项目'
        }
      ]
    }
  },
  mounted() {
    this.getRole()
    this.getMenu()
  },
  methods: {
    onEdit(text) {
      this.editId=text.key
      this.selectTree = []
      roleGet({ id: text.key }).then((res) => {
        let data = res.data.data
        // console.log(data.selectedRoleMenu)
        let select = []
        data.selectedRoleMenu.forEach((item) => {
          select.push(item.menuId)
        })
        this.selectTree = select
        this.flag = true
        // console.log(this.selectTree );
      })
      this.modalTitle = '编辑角色'
      this.form = JSON.parse(JSON.stringify(text))
      this.visible = true
    },
    onDelete(val) {
      roleDelete({ id: val.key }).then((res) => {
        this.$message.success('删除成功')
        this.getRole()
      })
    },
    confirm(item) {
      // console.log(e);
      this.onDelete(item)
    },
    cancel(e) {
      // console.log(e);
      this.$message.error('取消删除')
    },
    showModal() {
      this.modalTitle = '新增角色'
      this.form = {}
      this.flag = true
      this.selectTree = []
      this.visible = true
    },
    cancelModal() {
      this.flag = false
    },
    handleOk() {
      this.visible = false
      if (this.modalTitle != '编辑角色') {
        this.addRole()
      } else {
        let data = {
          id: this.editId,
          menuIdList: this.form.menuIdList,
          name: this.form.name,
          remarks: this.form.remarks
        }
        roleUpdate(data).then((res) => {
          this.$message.success('编辑成功')
          this.getRole()
        })
      }
    },

    onShowSizeChange(current, pageSize) {
      // console.log(current, pageSize)
      this.current = 1
      this.pageSize = pageSize
      this.getRole()
    },
    pageChange(current, pageSize) {
      this.current = current
      this.pageSize = pageSize
      this.getRole()
    },
    // onSelect(selectedKeys, info) {
    //   console.log('selected', selectedKeys, info)
    // },
    onCheck(checkedKeys, info) {
      this.form.menuIdList = []
      // console.log('onCheck', checkedKeys, info)
      // let a=checkedKeys
      // this.form.menuIdList.push(checkedKeys)
      // info.halfCheckedKeys.forEach((item) => {
      //   this.form.menuIdList.push(item)
      // })
      // console.log(info.halfCheckedKeys[0]);
      this.form.menuIdList = checkedKeys
      // this.form.menuIdList.push(info.halfCheckedKeys[0])
    },
    getRole() {
      let data = {
        page: this.current,
        size: this.pageSize,
        userIds: []
      }
      roleQuery(data).then((res) => {
        let data = res.data.data
        data.forEach((item) => {
          item.key = item.id
        })
        this.data = data
        this.total = res.data.total
      })
    },
    getMenu() {
      let data = {
        page: 0,
        size: 0
      }
      menuQuery(data).then((res) => {
        let data = res.data.data
        data.forEach((item) => {
          item.key = item.id
          item.title = item.name
          item.children.forEach((data) => {
            data.key = data.id
            data.title = data.name
          })
        })
        this.treeData = data
      })
    },
    addRole() {
      let data = {
        menuIdList: this.form.menuIdList,
        name: this.form.name,
        remarks: this.form.remarks
      }
      roleAdd(data).then((res) => {
        this.$message.success('添加成功')
        this.getRole()
      })
    }
  }
}
</script>

<style scoped>
.top {
  margin-bottom: 20px;
}
.atable {
  margin-bottom: 20px;
}
</style>